<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>钱包</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="plugins/element-ui/index.css" />
</head>

<body>
<div id="app">

  <el-table
      :data="purses"
      border
      style="width: 100%">
    <el-table-column
        prop="username"
        label="钱包所有者"
        width="120">
    </el-table-column>
<!--    <el-table-column
        prop="balance"
        label="余额"
        width="120">
    </el-table-column>-->

    <el-table-column
        label="操作"
        width="500">
      <template slot-scope="scope">
        <el-button @click="look(scope.row.id)" type="text">查看余额</el-button>
        <el-dialog title="余额" :visible.sync="dialogLook">
          {{balance}}
        </el-dialog>
        <el-button @click="consume100(scope.row.id)" type="text">消费100元</el-button>
        <el-button @click="refund20(scope.row.id)" type="text">退款20元</el-button>

        <el-button @click="detailsC(scope.row.id)" type="text">变动明细</el-button>
        <el-dialog title="钱包余额变动明细" :visible.sync="dialogChange">
          <el-table :data="details">
            <el-table-column property="time" label="交易日期" width="300"></el-table-column>
            <el-table-column property="type" label="交易类型" width="200"></el-table-column>
            <el-table-column property="amount" label="交易金额"  width="200"></el-table-column>
          </el-table>
        </el-dialog>
      </template>
    </el-table-column>

  </el-table>

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="./api/purse.js"></script>
<script>

  new Vue({
    el: '#app',
    data() {
      return {
        purses : [],
        details : [],
        balance: "",

        dialogLook : false,
        dialogChange : false,
      }
    },
    computed: {},
    created() {
      this.init()
    },

    mounted() {},

    methods: {
      async init() {
        let res = await initApi()
        if (res!=null){
          this.purses=res.data
        }else {
          this.$message.error("加载失败！")
        }
      },

      look(id){
        this.balance=this.purses[id-1].balance
        this.dialogLook = true
      },

      //消费100元
      async consume100(id) {
        let res = await consume100Api({id:id})
        if (res.data.toString() === "true"){
          this.$message.success("操作成功！")
        }else {
          this.$message.error("操作失败！")
        }
        this.init();
      },

      //退款20元
      async refund20(id) {
        let res = await refund20Api({id:id})
        if (res.data.toString() === "true") {
          this.$message.success("操作成功！")
        } else {
          this.$message.error("操作失败！")
        }
        this.init();
      },

      //变动明细
      async detailsC(id) {
        let res = await detailsApi(id)
        if (res !=null) {
          this.details=res.data
          this.dialogChange = true
        } else {
          this.$message.error("加载失败！")
        }
        this.init();
      }

    }
  })
</script>
</body>
</html>
